<template>
	<view>
		<view class="top-title-view" v-if="userTypeStatus !== 0">
			<view class="tab">
				<view :class="tabIndex===index?'item active-color':'item'" v-for="(item,index) in tabList" :key="index"
					@click="selectTab(index)">
					{{item}}
				</view>
			</view>
		</view>
		<view class="main" v-if="userTypeStatus !== 0">
			<scroll-view class="scrollheight" @scrolltolower="handleScrolltolowerone()" scroll-y="true"
				:style="{height:setcollapseheight() + 'px'}">
				<view v-if="dateList.length>0">
					<view class="contentItem" v-for="(item,index) in dateList" :key="index">
						<template>
							<!-- 已接单 -->
							<view class="whoCancel"
								v-if="item.orderStatus === 'ACCEPT' || item.orderStatus === 'ACCEPT_CLOSING' || item.orderStatus === 'DOING' || item.orderStatus === 'DOING_CLOSING'">
								<template v-if="item.closeApply !== null">
									<template v-if="item.closeApply.status === 'TBC'">
										<view v-if="item.closeApply && item.closeApply.applyPersonType === 'ORDER_SIDE'">
											需求方申请取消订单
										</view>
										<view v-else-if="item.closeApply && item.closeApply.applyPersonType === 'SERVER_SIDE'">
											等待需求方同意您的取消申请
										</view>
									</template>
									<template
										v-else-if="item.closeApply && item.closeApply.status === 'REJECT' && item.closeApply.applyPersonType === 'SERVER_SIDE'">
										<view>
											需求方拒绝了您的取消申请
										</view>
									</template>
								</template>
							</view>
							<!-- 投诉中 -->
							<view class="whoCancel"
								v-if="item.orderStatus == 'ACCEPT_APPEAL' || item.orderStatus == 'DOING_APPEAL' || item.orderStatus == 'DONE_APPEAL'">
								<view>
									订单投诉中，请等待运营方解决
								</view>
							</view>
							<!-- 调度 -->
							<view class="whoCancel"
								v-if="item.orderStatus == 'ACCEPT_DISPATCHING' || item.orderStatus == 'DOING_DISPATCHING'">
								<view v-show="true">
									调度中
								</view>
							</view>
							<!-- 待付款 -->
							<view class="whoCancel" v-if="item.orderStatus == 'DONE'">
								<view v-show="true">
									待对方付款
								</view>
							</view>
							<!-- 已取消 -->
							<view class="whoCancel" v-if="item.orderStatus == 'CLOSE'">
								<view v-if="item.closeApply !== null">
									取消发起人：
									<template>
										<template v-if="item.closeApply && item.closeApply.applyPersonType === 'ORDER_SIDE'">
											下单方
										</template>
										<template v-else-if="item.closeApply && item.closeApply.applyPersonType === 'SERVER_SIDE'">
											服务方
										</template>
										<template v-else-if="item.closeApply && item.closeApply.applyPersonType === 'SERVER_DISPATCH_SIDE'">
											服务调度方
										</template>
										<template v-else>
											服务运营方
										</template>
									</template>
								</view>
							</view>
						</template>
						<view class="header">
							<view class="vertical-line"></view>
							<view class="title">
								订单编号：
							</view>
							<view class="orderNo">
								{{item.orderNo}}
							</view>
							<view class="copy">
								<image class="copy-img" src="@/static/socialized-service/farm-service/copy.svg" @click="copyText(item.orderNo)"></image>
							</view>
						</view>
						<view class="container" v-if="item.serviceProjectName != '直播带货'">
							<view class="img4">
								<image src="@/static/index-message/liulanliang.png"></image>
							</view>
							<view class="text">
								<view class="title" style="width: 200rpx;">
									服务项目名称：
								</view>
								<view class="description" style="width: calc(100% - 280rpx);">
									{{item.serviceProjectName}}
								</view>
							</view>
						</view>
						<template v-if="item.serviceProjectName != '直播带货'">
							<view class="container">
								<view class="img">
									<image src="@/static/index-message/cropName.png"></image>
								</view>
								<view class="text">
									<view class="title" style="width: 140rpx;">
										作物名称：
									</view>
									<view class="description" style="width: calc(100% - 220rpx);">
										{{item.orderObjName ? item.orderObjName : '不限'}}
									</view>
								</view>
							</view>
						</template>
						<view class="container">
							<view class="img3">
								<image src="@/static/index-message/jingliren.png"></image>
							</view>
							<view class="text">
								<view class="title" style="width: 140rpx;margin-left: 26rpx;">
									联系人：
								</view>
								<view class="description" style="width: calc(100% - 220rpx);" v-if="item.contactName">
									{{item.contactName}}
								</view>
								<view class="description" style="width: calc(100% - 220rpx);" v-else>
									联系人：{{undefined}}
								</view>
							</view>
						</view>
						<view class="container">
							<view class="img4">
								<image src="@/subPage1/static/machinery/lianxidianhua.png"></image>
							</view>
							<view class="text">
								<view class="title" style="width: 140rpx;margin-left: 26rpx;">
									联系电话：
								</view>
								<view class="description" style="width: calc(100% - 220rpx);">
									{{item.contactPhone}}
								</view>
							</view>
						</view>
						<template v-if="item.serviceProjectName != '直播带货'">
							<view class="container">
								<view class="img3">
									<image src="@/subPage1/static/service-order/jutidizhi.png"></image>
								</view>
								<view class="text">
									<view class="title" style="width: 140rpx;">
										服务地址：
									</view>
									<view class="description" style="width: calc(100% - 220rpx);" v-if="item.properties">
										{{item.properties.filter(el=>el.expression ==='addressArea')[0].textValue}}
									</view>
								</view>
							</view>
							<view class="container">
								<view class="img3">
									<image src="@/static/index-message/jigou.png"></image>
								</view>
								<view class="text" style="height: 100%;display: flex;align-items: center;">
									<view class="title" style="width: 140rpx;">
										详细地址：
									</view>
									<view style="width: calc(100% - 220rpx);height: 100%;" v-if="item.properties">
										{{item.properties.filter(el=>el.expression === 'addressInfo')[0].textValue}}
									</view>
								</view>
							</view>
							<view class="container">
								<view class="img4">
									<image src="@/subPage1/static/service-order/mushu.png"></image>
								</view>
								<view class="text">
									<view class="title" style="width: 140rpx;">
										服务亩数：
									</view>
									<view class="description" style="width: calc(100% - 220rpx);" v-if="item.properties">
										{{item.properties.filter(el=>el.expression === 'rate')[0].numValue}}
									</view>
								</view>
							</view>
						</template>
						<view class="container">
							<view class="img">
								<image src="@/static/index-message/price.png"></image>
							</view>
							<view class="text">
								<view class="title" style="width: 140rpx;">
									预计价格：
								</view>
								<view class="description" style="width: calc(100% - 220rpx);">
									{{item.orderAmount}}
								</view>
							</view>
						</view>
						
						<template v-if="item.serviceProjectName != '直播带货'">
							<view class="container" v-if="item.orderStatus === 'DONE' || item.orderStatus === 'PAID' || item.orderStatus === 'COMMENTED' || item.orderStatus === 'END'">
								<view class="img4">
									<image src="@/subPage1/static/service-order/mushu.png"></image>
								</view>
								<view class="text">
									<view class="title" style="width: 200rpx;">
										实际服务亩数：
									</view>
									<view class="description" style="width: calc(100% - 220rpx);" v-if="item.properties">
										{{item.properties.filter(el=>el.expression === 'payRate')[0].numValue}}
									</view>
								</view>
							</view>
						</template>
						<template v-if="item.serviceProjectName != '直播带货'">
							<view class="container" v-if="item.orderStatus === 'DONE' || item.orderStatus === 'PAID' || item.orderStatus === 'COMMENTED' || item.orderStatus === 'END'">
							<view class="img">
								<image src="@/static/index-message/price.png"></image>
							</view>
							<view class="text">
								<view class="title" style="width: 140rpx;">
									实际价格：
								</view>
								<view class="description" style="width: calc(100% - 220rpx);">
									{{item.payAmount}}
								</view>
							</view>
						</view>
						</template>
						<view class="container">
							<view class="img4">
								<image src="@/static/index-message/unit.png"></image>
							</view>
							<view class="text">
								<view class="title" style="width: 200rpx;" v-if="status == 'CANCEL'">
									实际开始时间：
								</view>
								<view class="title" style="width: 200rpx;" v-else>
									期望开始时间：
								</view>
								<view class="description1" style="width: calc(100% - 280rpx);" v-if="item.serviceBegin">
									{{item.serviceBegin !== 'null' ? formatTime(item.serviceBegin) : ''}}
								</view>
							</view>
						</view>
						<view class="container">
							<view class="img4">
								<image src="@/static/index-message/endTime.png"></image>
							</view>
							<view class="text">
								<view class="title" style="width: 200rpx;" v-if="status == 'CANCEL'">
									实际结束时间：
								</view>
								<view class="title" style="width: 200rpx;" v-else>
									期望结束时间：
								</view>
								<view class="description1" style="width: calc(100% - 280rpx);" v-if="item.serviceEnd">
									{{item.serviceEnd !== 'null' ? formatTime(item.serviceEnd) : ''}}
								</view>
							</view>
						</view>
						
						<template v-if="item.serviceProjectName == '直播带货'">
							<view class="container" style="margin-bottom: 10rpx;">
								<view class="img4">
									<image src="@/subPage1/static/service-order/mushu.png"></image>
								</view>
								<view class="text">
									<view class="title" style="width: 140rpx;">
										带货产品：
									</view>
									<view class="description" style="width: calc(100% - 220rpx);" v-if="item.properties">
										{{item.properties.filter(el=>el.expression === 'goods')[0].textValue}}
									</view>
								</view>
							</view>
						</template>
						<template v-if="item.serviceProjectName != '直播带货'">
							<view class="container">
								<view class="img4">
									<image src="@/subPage1/static/service-order/machinery.png"></image>
								</view>
								<view class="text">
									<view class="title" style="width: 140rpx;">
										自选农机：
									</view>
									<view class="description" style="width: calc(100% - 220rpx);" v-if="item.properties">
										{{item.servicerDeviceName}}
									</view>
								</view>
							</view>
							<view class="container">
								<view class="img3">
									<image src="@/static/index-message/jingliren.png"></image>
								</view>
								<view class="text">
									<view class="title" style="width: 140rpx;margin-left: 26rpx;">
										服务人：
									</view>
									<view class="description" style="width: calc(100% - 220rpx);">
										{{item.servicerName}}
									</view>
								</view>
							</view>
							<view class="container"
								:style="{'margin-bottom': item.orderStatus === 'CLOSE' ? '0' : '10rpx'}">
								<view class="img4">
									<image src="@/subPage1/static/machinery/lianxidianhua.png"></image>
								</view>
								<view class="text">
									<view class="title" style="width: 140rpx;margin-left: 26rpx;">
										服务电话：
									</view>
									<view class="description" style="width: calc(100% - 220rpx);">
										{{item.servicerPhone}}
									</view>
								</view>
							</view>
						</template>
						<view class="container" style="margin-bottom: 10rpx;" v-if="item.orderStatus === 'CLOSE'">
							<view class="img4">
								<image src="@/static/index-message/liulanliang.png"></image>
							</view>
							<view class="text">
								<view class="title" style="width: 140rpx;">
									取消时间：
								</view>
								<view class="description1" v-if="item.closeApply !== null">
									{{item.closeApply.timestamp}}
								</view>
							</view>
						</view>
						<opeate :key="operateId" :status="item.orderStatus" :complainApply="item.complainApply" :evaluated="item.evaluated" :tabIndex="tabIndex" :id='item.id' :origServicerUserId="item.origServicerUserId"
							:closeApply="item.closeApply" :svcObjId="item.svcObjId" :contactPhone="item.contactPhone"
							:organizationNo="item.organizationNo" :properties="item.properties" :serviceProperties="item.serviceProperties"
							:orderAmount="item.orderAmount" :orderId="item.orderNo" @updateOrder="updateOrder" :serviceProjectName="item.serviceProjectName">
						</opeate>
					</view>
				</view>
				<view v-else>
					<view class="blank">
						<image src="@/static/blank.png" mode=""></image>
						<view class="nodata">
							暂无数据
						</view>
					</view>
				</view>
				<view class="bottom-ios-lineline">
				</view>
				<view class="bottom-ios-line">
				</view>
			</scroll-view>
		</view>
		<view class="bottom-ios-line"></view>
	</view>
</template>

<script>
	import API from '@/api/socialized-servce/farm-service/mechanist/my-order/index.js'
	import opeate from './components/opeate/index.vue'
	export default {
		components: {
			opeate
		},
		props:{
			userTypeStatus:{
				type: Number,
				default:()=>{
					return 0
				}
			},
			serviceProjectNo: {
				type: String,
				default: ()=>{
					return ''
				}
			}
		},
		watch: {
			userTypeStatus(newValue) {
				if(newValue > 0 || newValue === 0) {
					let index = uni.getStorageSync('formServiceOrderTabIndex')
					if (index) {
						this.tabIndex = index
						this.selectTab(index * 1)
					} else {
						this.selectTab(0)
					}
				}
			},
			serviceProjectNo(newValue) {
				if((this.userTypeStatus > 0 && newValue !== '')) {
					let index = uni.getStorageSync('formServiceOrderTabIndex')
					if (index) {
						this.tabIndex = index
						this.selectTab(index * 1)
					} else {
						this.selectTab(0)
					}
				}
			}
		},
		data() {
			return {
				personmessage: '',
				status: '',
				statusList: [],
				page: 1,
				total: 0,
				tabList: ['待接单', '待服务', '服务中', '已完成', '已取消', '已调度'],
				tabIndex: 0,
				dateList: [],
				operateId: null
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.getMyOreder1()
			setTimeout(function() {
				uni.stopPullDownRefresh()
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 1000
				});
			}, 1000)
		},
		mounted() {
			let index = uni.getStorageSync('formServiceOrderTabIndex')
			if (index > 0) {
				this.tabIndex = index
				if(this.serviceProjectNo === '')return
				this.selectTab(index * 1)
			} else {
				if(this.serviceProjectNo === '')return
				this.selectTab(0)
			}
			this.setcollapseheight()
		},
		methods: {
			async getMyOreder1(status = this.status, list = this.statusList) {
				this.operateId = Math.random(0,10)
				let params = {}
				if (list.length > 0) {
					params = {
						page: this.page,
						size: 10,
						condition: {
							orderStatusList: list,
							baseServiceProjectNo: this.serviceProjectNo,
							serviceProviderNo: uni.getStorageSync('serviceProviderNo')
						}
					}
				}
				if (status !== '' && list.length === 0) {
					params = {
						page: this.page,
						size: 10,
						condition: {
							orderStatus: status,
							baseServiceProjectNo: this.serviceProjectNo,
							serviceProviderNo: uni.getStorageSync('serviceProviderNo')
						}
					}
				}
				let res = await API.queryMyOrder(params)
				if (res.code === 200) {
					this.total = res.data.totalElements
					this.dateList = res.data.content
				}
			},
			async handleScrolltolowerone() {
				console.log(123)
				if (this.tabIndex === 5) {
					if (this.dateList.length < this.total) {
						this.page++
						let params = {
							page: this.page,
							size: 10
						}
						let res = await API.dispatchOrderList(params)
						if (res.code === 200) {
							this.total = res.data.totalElements
							let newList = res.data.content
							this.dateList = [...this.dateList, ...newList]
						}
					}
				} else {
					if (this.dateList.length < this.total) {
						this.page++
						let params = {}
						if (this.statusList.length > 0) {
							params = {
								page: this.page,
								size: 10,
								condition: {
									orderStatusList: this.statusList,
									baseServiceProjectNo: this.serviceProjectNo,
									serviceProviderNo: uni.getStorageSync('serviceProviderNo')
								}
							}
						}
						if (this.status !== '' && this.statusList.length === 0) {
							console.log(2);
							params = {
								page: this.page,
								size: 10,
								condition: {
									orderStatus: this.status,
									baseServiceProjectNo: this.serviceProjectNo,
									serviceProviderNo: uni.getStorageSync('serviceProviderNo')
								}
							}
						}
						let res = await API.queryMyOrder(params)
						if (res.code === 200) {
							let newList = res.data.content
							this.dateList = [...this.dateList, ...newList]
						}
						console.log('总数', this.total, this.dateList.length, this.page);
					}
				}
			},
			selectTab(index) {
				uni.setStorageSync('formServiceOrderTabIndex', index)
				this.tabIndex = index
				this.status = ''
				this.statusList = []
				this.dateList = []
				this.page = 1
				if (index === 0) {
					// 待接单
					this.status = 'START'
				} else if (index === 1) {
					// 待服务
					this.statusList = ['ACCEPT', 'ACCEPT_CLOSING', 'ACCEPT_APPEAL', 'ACCEPT_DISPATCHING']
				} else if (index === 2) {
					// 服务中
					this.statusList = ['DOING', 'DOING_CLOSING', 'DOING_DISPATCHING', 'DOING_APPEAL',
						'DONE', 'DONE_APPEAL'
					]
				} else if (index === 3) {
					// 已完成
					this.statusList = ['PAID', 'COMMENTED', 'END']
				} else if (index === 4) {
					// 已取消
					this.status = 'CLOSE'
				} else if (index === 5) {
					// 已调度
					this.getDispatchList()
					console.log('已调度--另外接口');
					return;
				}
				if(this.userTypeStatus === 1) {
					this.getMyOreder1()
				}
			},
			async getDispatchList() {
				let params = {
					page: 1,
					size: 10,
					condition: {
						baseServiceProjectNo: this.serviceProjectNo,
					}
				}
				let res = await API.dispatchOrderList(params)
				if (res.code === 200) {
					this.total = res.data.totalElements
					this.dateList = res.data.content
				}
			},
			updateOrder() {
				this.selectTab(this.tabIndex)
			},
			setcollapseheight() {
				let topheightone = uni.upx2px(260)
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});
				let oldHeight = uni.upx2px(136)
				winHeight = parseInt(winHeight) - topheightone - oldHeight
				// #ifndef APP-PLUS
				winHeight = winHeight + 40
				// #endif
				return winHeight
			},
			goHome() {
				let url = ''
				if(this.personmessage === 'personmessage') {
					url = '/pages/socialized-service/person-message/person-message'
				} else {
					url = '/pages/socialized-service/selection-system/selection-system'
				}
				uni.switchTab({
					url: url
				})
			},
			formatTime(time) {
				let Y = time.slice(0, 4) + '-'
				let M = time.slice(4, 6) + '-'
				let D = time.slice(6, 8) + ' '
				let h = time.slice(8, 10) + ':'
				let m = time.slice(10, 12) + ':'
				let s = time.slice(12)
				return Y + M + D + h + m + s
			},
			copyText(text) {
			  // 将文本设置到剪贴板
			  uni.setClipboardData({
				data: text,
				success: () => {
				  // 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
				  uni.showToast({
					title: '复制成功',
					icon: 'success',
					duration: 2000
				  });
				}
			  });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-title-view {
		position: fixed;
		width: 95%;
		height: 58rpx;
		margin-top: 10rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;

		.tab {
			display: flex;
			width: 100%;
			height: 100%;
			background-color: #E2E2E2;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			overflow: hidden;

			.item {
				height: 100%;
				width: 50%;
				background-color: #E2E2E2;
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #818181;
				text-align: center;
				line-height: 58rpx;
			}

			.active-color {
				border-radius: 30rpx 30rpx 30rpx 30rpx;
				color: #fff;
				background: linear-gradient(270deg, #88ACFF 0%, #2165FF 100%);
			}
		}
	}

	.main {
		padding-top: 80rpx;

		.blank {
			position: absolute;
			width: 100%;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 200rpx;
				height: 200rpx;
			}

			.nodata {
				margin-top: 20rpx;
			}
		}

		.contentItem {
			position: relative;
			margin: 0 40rpx;
			margin-bottom: 16rpx;
			background-color: #FFFFFF;
			padding: 20rpx 12rpx 10rpx 12rpx;
			box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.whoCancel {
				position: absolute;
				right: 10rpx;
				font-size: 14px;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #FF5050;
			}

			.header {
				position: relative;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #EFEFEF;
				color: #91743E;
				
				.copy {
					position: absolute;
					top: 46rpx;
					right: 6rpx;
					.copy-img {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.vertical-line {
					position: absolute;
					top: 8rpx;
					left: 0;
					width: 10rpx;
					height: 28rpx;
					background-color: #91743E;
				}

				.title {
					width: 65%;
					padding-left: 24rpx;
					font-size: 32rpx;
					font-weight: 500;
				}

				.orderNo {
					font-size: 25rpx;
					margin-top: 10rpx;
				}

			}

			.container {
				display: flex;
				align-items: center;
				margin-left: 32rpx;
				margin-right: 10rpx;
				margin-top: 30rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #272727;

				.img {
					width: 35rpx;
					height: 30rpx;

					image {
						position: relative;
						z-index: 9;
						width: 35rpx;
						height: 30rpx;
					}
				}

				.img3 {
					width: 30rpx;
					height: 30rpx;

					image {
						position: relative;
						z-index: 9;
						width: 27rpx;
						height: 35rpx;
					}
				}

				.img4 {
					width: 35rpx;
					height: 26rpx;

					image {
						position: relative;
						z-index: 9;
						width: 35rpx;
						height: 26rpx;
					}
				}

				.text {
					width: 100%;
					display: flex;
					overflow: hidden;

					.title {
						margin-left: 20rpx;
					}

					.description {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}

	.btn {
		z-index: 99;
		position: fixed;
		bottom: 180rpx;
		left: 50%;
		width: 340rpx;
		transform: translateX(-50%);
		height: 80rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.scrollheight {
		position: relative;
		box-sizing: border-box;
	}

	/deep/ .u-upload__wrap__preview__other {
		height: 80rpx !important;
		width: 80rpx !important;
	}

	/deep/ .u-upload__wrap {
		display: flex;
		align-items: center;
	}

	/deep/ .u-upload__deletable {
		z-index: 999999999 !important;
	}

	/deep/ .u-upload__deletable__icon {
		top: 8rpx;
		right: 4rpx;
		transform: scale(1.7);
	}
</style>